<template>
	<view :class="[active > 2 ? 'content-container' : 'content']">
		<!-- 搜索弹窗 -->
		<uni-popup ref="searchPop" type="top">
			<view class="search-wrap">
				<view class="input-box">
					<uni-easyinput v-model="searchVideoQuery.search" placeholder="心理咨询相关课程" confirmType="done"
						@confirm='searchVideo' />
				</view>
				<view class="btns-wrap">
					<view class="cancel" @tap="cancelHandle">取消</view>
					<view class="confirm" @tap="searchVideo">确认</view>
				</view>
			</view>
		</uni-popup>
		<view class="title-bar" :style="{height: titleBarHeight + 'px'}">
			<image class="bar-image" src="/static/images/icon-images/logo.png" mode="widthFix"></image>
			<text>在立只，看见成长</text>
		</view>
		<!-- 顶部搜索区 -->
		<view :class="[(active < 2) ? 'top-search-bar' : 'top-content']">
			<view class="search-bar-box" :style="{height: titleBarHeight + 'px', top: topMount + 'rpx'}">
				<!-- v-show="active >= 2" -->
				<view class="search-bar" @tap="showSearchPop">
					<!-- <input class="search-input" type="text" v-model="searchVideoQuery.search"
						placeholder="心理咨询相关课程" confirm-type="search" @confirm='searchVideo'
						placeholder-style="color: #fff;font-size:20rpx;" /> -->
					<view class="img-box">
						<image @tap='searchVideo' class="search-icon" src="/static/images/icon-images/search.png"
							mode="widthFix">
						</image>
						<text>搜索</text>
					</view>
				</view>
			</view>

			<view class="scroll-wrap">
				<scroll-view class="nav-scroll-bar" scroll-x="true">
					<view class="nav-list-bar">
						<view :class="['nav-item', active == i ? 'active' : '']" v-for="(item, i) in navList" :key='i'
							@tap='navChange(i, item.id)'>
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 顶部搜索区 @animationfinish="animationfinishLeft" @transition="transHandleLeft" -->

		<view class="swiper-content-box">
			<swiper style="width: 100%;min-height: 100vh;"  @change="allSwiperChange" :current="active">
				<swiper-item>

					<!-- 视频轮播区  :current='current' @animationfinish="animationfinish" @transition="transHandle"-->
					<swiper  vertical style="width: 100%;height: 100%;"
						@change='swiperVideoChange'  :current="current5">
						<!-- :autoplay='item.isAuto' :enable-play-gesture="true" auto-pause-if-navigate   -->
						<swiper-item v-for="(item, i) in tuiVideoList" :key="item.id">

							<view class="video-box">
								<!-- 右侧图标区 -->
								<view class="right-icon-bar">
									<!-- <view class="right-icon-box" @tap='videolists(item)'>
										<image src="/static/images/icon-images/icon.png" mode="widthFix"></image>
									</view> -->
									<!-- 点赞 -->
									<view class="right-icon-box" @tap="thumbsUp(item, item.id, i)">
										<image v-if="item.is_like == 0" src="/static/images/icon-images/icon2.png"
											mode="widthFix"></image>
										<image v-else src="/static/images/icon-images/a1.png" mode="widthFix"></image>
										<view class="count">{{item.likes || '0'}}</view>
									</view>
									<!-- 评论 -->
									<view class="right-icon-box" @tap="chatfun(i, item.id)">
										<image src="/static/images/icon-images/icon3.png" mode="widthFix"></image>
										<view class="count">{{item.comments || '0'}}</view>
									</view>
									<!-- 转发 -->
									<view class="right-icon-box">
										<button open-type="share" v-bind:data-student="item" class="share">
											<image src="/static/images/icon-images/icon4.png" mode="widthFix"></image>
										</button>
										<!-- <image src="/static/images/icon-images/icon4.png" mode=""></image> -->
										<view class="count" style="margin-top: -36rpx;">{{item.forwardings || '0'}}
										</view>
									</view>
								</view>
								<!-- @tap="playChange(item)" -->
								<!-- 右侧图标区 objectFit="contain" @tap="playChange" @play="playHandle"-->
								<view :class="['video-content', isPlaying ? '' : 'video-box-v']"
									style="position: relative;z-index: -1;">
									<video :style="{height: item.realHeight + 'rpx'}" :id="'video' + i + '0'"
										@tap='playChange(item)' :controls="iSFullScreen" loop
										:show-fullscreen-btn="iSFullScreen" @fullscreenchange='fullScreenChange'
										@error="videoErrorCallback" :show-play-btn="iSFullScreen"
										:show-center-play-btn="false" @pause="pauseHandle" @play="playHandle"
										:src="item.video_url" :http-cache="false">
			
									</video>
									<image v-if="!isPlaying" @tap='playChange(item)'
										src="/static/images/icon-images/bofang.png" mode=""></image>
									<view :class="['full-video', item.realHeight > 1000 ? 'right-video' : 'left-video']"
										@tap.stop="fullScreenHandle(item)">
										<image style="width: 60rpx;" src="/static/images/icon-images/full.png"
											mode="widthFix"></image>
									</view>
								</view>
								<view class="video-msg-box">
									<view class="video-avatar-box">
										<view class="avatar-box">
											<view class="avatar">
												<image v-if="item.author.head_portrait" :src="item.author.head_portrait"
													mode="" @tap.stop="toInfoTeacher(item.author.id)"></image>
												<image v-else src="/static/images/icon-images/default.png" mode=""
													@tap.stop="toInfoTeacher(item.author.id)"></image>
											</view>
											<view class="name" v-if="active < 2">{{item.author.nickname || ''}}</view>
											<view class="name" v-else>{{item.author || ''}}</view>
											<image @tap='subscribe(item.author.id)' class="add-image"
												src="/static/images/icon-images/jia.png" mode=""></image>
										</view>
									</view>
									<view class="title">
										{{item.title || ''}}
									</view>
									<view class="content-wrap">
										{{item.describe || ''}}
									</view>
									<view class="content-box" @tap="groupContent(item.group)" v-if="item.group">
										<image class="book-icon" src="/static/images/icon-images/book.png" mode="">
										</image>
										<view class="tip" v-if="item.groupname">
											课程合集《{{item.groupname || ''}}》
										</view>
										<image class="more" src="/static/images/icon-images/more.png" mode=""></image>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>

					<!-- 视频轮播区  :current='current' -->
					<swiper @animationfinish="animationfinish" vertical style="width: 100%;height: 100%;"
						@change='swiperVideoChange' @transition="transHandle" :current="current0">
						<swiper-item v-for="(item, i) in pickVideoList" :key="item.id">
							<view class="video-box">
								<!-- 右侧图标区 -->
								<view class="right-icon-bar">
									<!-- <view class="right-icon-box" @tap='videolists(item)'>
										<image src="/static/images/icon-images/icon.png" mode=""></image>
									</view> -->
									<!-- 点赞 -->
									<view class="right-icon-box" @tap="thumbsUp(item, item.id)">
										<image v-if="item.is_like == 0" src="/static/images/icon-images/icon2.png"
											mode="widthFix"></image>
										<image v-else src="/static/images/icon-images/a1.png" mode="widthFix"></image>
										<view class="count">{{item.likes || '0'}}</view>
									</view>
									<!-- 评论 -->
									<view class="right-icon-box" @tap="chatfun(i, item.id)">
										<image src="/static/images/icon-images/icon3.png" mode=""></image>
										<view class="count">{{item.comments || '0'}}</view>
									</view>
									<!-- 转发 -->
									<view class="right-icon-box">
										<button style="background-color: transparent;" open-type="share"
											v-bind:data-student="item" class="share">
											<image src="/static/images/icon-images/icon4.png" mode=""></image>
										</button>
										<view class="count" style="margin-top: -36rpx;">{{item.forwardings || '0'}}
										</view>
									</view>
								</view>
								<!-- 右侧图标区 objectFit="contain"@tap="playChange" @play="playHandle"-->
								<view :class="['video-content', isPlaying ? '' : 'video-box-v']"
									style="position: relative;z-index: -1;">
									<video :style="{height: item.realHeight + 'rpx', width: '750rpx'}"
										@tap='playChange(item)' @fullscreenchange='fullScreenChange'
										:id="'video' + i + '1'" :controls="iSFullScreen" loop
										:show-fullscreen-btn="iSFullScreen" @error="videoErrorCallback"
										:show-play-btn="iSFullScreen" :show-center-play-btn="false" @pause="pauseHandle"
										@play="playHandle" :src="item.video_url"></video>
									<image v-if="!isPlaying" @tap='playChange(item)'
										src="/static/images/icon-images/bofang.png" mode=""></image>
									<view v-show="isPlaying"
										:class="['full-video', item.realHeight > 1000 ? 'right-video' : 'left-video']"
										@tap.stop="fullScreenHandle(item)">
										<image style="width: 60rpx;" src="/static/images/icon-images/full.png"
											mode="widthFix"></image>
									</view>
								</view>
								<view class="video-msg-box">
									<view class="video-avatar-box">
										<view class="avatar-box">
											<view class="avatar">
												<image v-if="item.author.head_portrait" :src="item.author.head_portrait"
													mode="" @tap.stop="toInfoTeacher(item.author.id)"></image>
												<image v-else src="/static/images/icon-images/default.png" mode=""
													@tap.stop="toInfoTeacher(item.author.id)"></image>
											</view>
											<view class="name" v-if="active < 2">{{item.author.nickname || ''}}</view>
											<view class="name" v-else>{{item.author || ''}}</view>
											<image @tap='subscribe(item.author.id)' class="add-image"
												src="/static/images/icon-images/jia.png" mode=""></image>
										</view>
									</view>
									<view class="title">
										{{item.title || ''}}
									</view>
									<view class="content-wrap">
										{{item.describe || ''}}
									</view>
									<view class="content-box" @tap="groupContent(item.group)" v-if="item.group">
										<image class="book-icon" src="/static/images/icon-images/book.png" mode="">
										</image>
										<view class="tip" v-if="item.groupname">
											课程合集《{{item.groupname || ''}}》
										</view>
										<image class="more" src="/static/images/icon-images/more.png" mode=""></image>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

				</swiper-item>

				<swiper-item style="min-height: 100vh;overflow: auto;" v-for="(item1, i1) in navCount" :key="i1">
					<!-- 除了关注推荐的样式 -->
					<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower='scrollToBottem'>
						<view class="main-container-list">
							<view :class="[(i % 2 != 0) ? 'main-container-item-s' : 'main-container-item']"
								v-for="(item, i) in videoList" :key="i"
								:style="{marginTop: (i % 2 != 0) && i != 1 ? -60 * parseInt(i / 2) + 'rpx' : '0'}"
								@tap="toPlayVideo(item)">
								<view class="main-video-time">
									{{item.video_time | filterVideoTime}}
								</view>
								<view :class="[(i % 2 != 0) ? 'main-img-box-s' : 'main-img-box']">
									<!-- <video :src="item.video_url" objectFit="fill" :controls="false"></video> -->
									<image :src="item.cover_url" mode="aspectFill"></image>
								</view>
								<view class="main-title">
									{{item.title || ''}}
								</view>
								<view class="main-content">
									{{item.describe || ''}}
								</view>
								<view class="main-nick">
									<view @tap.stop="addCart(item)" v-if="item.is_buy == 0 && item.price != 0"
										class="add-cart">加入购物车</view>
									<text>{{item.author.nickname || ''}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 视频合集 groupList -->
		<uni-popup ref="group-list" type="bottom" style="z-index: 20000;">
			<view class="morevideo">
				<view class="video-title-close">
					<view class="video-list-name">
						<view class="video-title-icon"></view>
						<text class="video-title">课程合集</text>
					</view>
					<uni-icons type="close" size="22" color="#707070" @click="groupClose"></uni-icons>
				</view>
				<view class="video-lsits" v-show="groupCount != 0">
					<scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 800rpx;">
						<view class="video-list-items" v-for="(item, i) in groupList" :key="i" @tap="toPlayVideo(item)">
							<view class="video-list-items-img">
								<image :src="item.cover_url" style="width: 260rpx;height: 210rpx;border-radius: 20rpx;"
									mode="aspectFill"></image>
								<view class="video-list-items-img-time">
									<text
										style="color: #FFFFFF;font-size: 20rpx;">{{item.video_time | filterVideoTime}}</text>
								</view>
							</view>
							<view class="video-list-items-desc">
								<text style="color: #1A1A1A;font-weight: bold;">{{item.title || ''}}</text>
								<text style="color: #4D4D4D;">{{item.describe || ''}}</text>
								<view class="video-list-items-desc-price">
									<text style="color: #B91C27;">￥{{item.price}}</text>
									<!-- <uni-icons type="cart-filled" size="20" color="#B91C27"></uni-icons> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" v-show="groupCount == 0"
					style="color: #999;width: 100%;text-align: center;font-size: 48rpx;line-height: 180rpx;">
					该视频为单视频，暂无视频合集
				</view>
			</view>
		</uni-popup>

		<!-- 更多视频 -->
		<uni-popup ref="popup_video" type="bottom" style="z-index: 20000;">
			<view class="morevideo">
				<view class="video-title-close">
					<view class="video-list-name">
						<view class="video-title-icon"></view>
						<text class="video-title">总的课程名称</text>
					</view>
					<uni-icons type="close" size="22" color="#707070" @click="videoclose"></uni-icons>
				</view>
				<view class="video-lsits" style="">
					<scroll-view :scroll-y="true" :show-scrollbar="false"
						:style="{height : payment.shop_id ? '700rpx' : '800rpx'}">
						<template v-for="(item, i) in cartList">
							<view v-if="item.price != 0" :class="['video-list-items', item.isClick ? 'active-bg' : '']"
								:key="i" @tap="payMoney(item.id, item.price, i)">
								<view class="video-list-items-img">
									<image :src="item.cover_url"
										style="width: 260rpx;height: 210rpx;border-radius: 20rpx;" mode="aspectFill">
									</image>
									<view class="video-list-items-img-time">
										<text
											style="color: #FFFFFF;font-size: 20rpx;">{{item.video_time | filterVideoTime}}</text>
									</view>
								</view>
								<view class="video-list-items-desc">
									<text style="color: #1A1A1A;font-weight: bold;">{{item.title || ''}}</text>
									<text style="color: #4D4D4D;">{{item.describe || ''}}</text>
									<view class="video-list-items-desc-price">
										<text style="color: #B91C27;">￥{{item.price}}</text>
										<uni-icons type="cart-filled" size="20" color="#B91C27"></uni-icons>
									</view>
								</view>
							</view>
						</template>

					</scroll-view>
				</view>
				<!-- 结算按钮 -->
				<view class="price-box" v-if="payment.shop_id">
					<view class="left-radio">
						<label class="radio">
							<radio :checked="isAllChecked" value="1" @tap="radioChange" />
							<text class="title">全选</text>
						</label>
					</view>
					<view class="amount-box">
						<text class="amount">合计：</text>
						<text class="price">{{allMoney}}</text>
					</view>
					<view class="confirm-btn" @tap="payMoneyprice">
						立即结算
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 评论 -->
		<uni-popup ref="popup_chat" type="bottom" style="z-index: 20000;">
			<view class="comments">
				<view class="comments-title-close">
					<text style="font-size: 36rpx;letter-spacing: 4rpx;">{{commentAmount}}条评论</text>
					<uni-icons type="close" size="22" color="#707070" class="popup-close" @click="commentclose">
					</uni-icons>
				</view>
				<scroll-view scroll-y="true" style="width: 100%;height: 600rpx;">
					<view class="comments-contents">
						<view class="comments-detail-item" v-for="(item, i) in commentList" :key="i">
							<image :src="item.member.head_portrait" mode="aspectFit"
								style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
							<view class="comments-detail-text">
								<text style="font-size: 30rpx;">{{item.member.nickname || ''}}</text>
								<text
									style="font-size: 24rpx;padding: 15rpx 0;color: #999999;">{{item.created_at | filterDay}}</text>
								<view class="comments-detail-text-first">
									<text @tap='commentClick(item.id, item.member.nickname)'>{{item.text || ''}}</text>
									<view class="comments-detail-text-dianzan" @tap="giveThumbsUp(item.id)">
										<uni-icons type="heart-filled" color="#CFCFCF" size="28"></uni-icons>
										<text style="color: #737373;font-size: 30rpx;">{{item.likes || '0'}}</text>
									</view>
								</view>
								<!-- 第二层评论 -->
								<view class="comment-second-box">
									<view class="comment-second-item" v-for="(item1, i1) in item.comments" :key='i1'>
										<template v-if="showAllComments ? true : (i1 == 0)">
											<view class="avatar-box">
												<view class="avatar">
													<image :src="item1.member.head_portrait" mode=""></image>
												</view>
												<view class="nickname">{{item1.member.nickname}}</view>
											</view>
											<view class="time">{{item1.created_at | filterDay}}</view>
											<view class="test">{{item1.text || ''}}</view>
										</template>

									</view>
									<view class="more" v-if="item.comments && item.comments.length > 1"
										@tap='allCommentsShow'>
										{{showAllComments ? '收起' : '-查看全部回复-'}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
				<view class="comments-send">
					<input @focus="btnchangeon" @blur="btnchangeoff" class="comments-send-input" type="text"
						v-model="sendCommentQuery.text" :placeholder="placeholder" />
					<text :class="commentsSendBtn" @click="commentSendText">
						<text>发送</text>
					</text>
				</view>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		timestampToTime,
		follow_status
	} from '@/api/api.js'
	export default {
		data() {
			return {
				// 视频滑块配置
				vertical: true,
				// 评论按钮
				commentsSendBtn: 'comments-send-btn',

				// 视频列表参数
				videoQuery: {
					classify: '',
					offset: 1,
					limit: 10
				},
				videoList: [],
				total: 0,
				text: '',
				active: 0,
				navList: [],
				navCount: 0,

				// 评论参数
				commentQuery: {
					id: ''
				},
				commentList: [], // 评论列表
				// 提交评论参数
				sendCommentQuery: {
					shop_id: '',
					text: '',
					comment_id: 0, // 引用评论 id 默认0 
					level: 0 // 引用层级 默认 0 
				},
				commentAmount: 0,
				videoInfo: {}, // 当前看的视频的信息
				payment: {
					shop_id: ''
				},
				allMoney: 0,
				apiList: [],
				current: 0,
				playVideoInfo: {},
				currentIndex: 0,
				videoContent: '',
				commentIndex: 0,
				isAllChecked: false,
				placeholder: '您可以在此输入评论...',
				// 是否评论视频
				isCommentVideo: true,

				searchVideoQuery: {
					classify: '',
					offset: 1,
					limit: 10,
					search: ''
				},
				currentNum: 0,
				showAllComments: false, // 是否查看所有评论
				groupQuery: {
					group: '',
					offset: 1,
					limit: 10
				},
				groupList: [],
				current0: 0,
				current5: 0,
				showMark: false, // 遮罩层


				// 支付列表 走的合集内容接口
				payMentQuery: {
					group: '',
					offset: 1,
					limit: 10
				},
				payMentList: [],
				videoHeight: 0,

				// 关注视频
				pickVideoList: [],
				// 关注视频参数
				followQuery: {
					last_id: ''
				},
				// 推荐视频
				tuiVideoList: [],
				// 推荐视频参数
				tuiQuery: {
					last_id: ''
				},
				isPlaying: true,
				landscape: '',

				titleBarHeight: '',
				groupCount: '0',
				context: {},
				historyContext: {}, // 历史视频对象
				iSFullScreen: false, // 是否全屏模式
				topMount: 0,

				// 当前播放的视频详情
				playVideoDetail: {},
				playId: 0,
				offset: 0,
				offsetX: 0
			}
		},
		computed: {
			...mapGetters(['cartList'])
		},
		onShow() {
			this.isPlaying = true
			if (this.active == 1) {
				if (this.followQuery.last_id) {
					this.videoShow(this.followQuery.last_id, 0)
				}
				if (this.pickVideoList.length != 0) return this.playVideo()
				new Promise((resolve, reject) => {
					resolve(this.getFollowList())
				}).then(res => {
					// this.$nextTick(() => {
					// 	this.context = uni.createVideoContext('video' + this.current0 + 1)
					// })
					if (!this.followQuery.last_id) return this.playVideo()
					this.playVideo();
					new Promise((resolve, reject) => {
						resolve(this.getFollowList())
					}).then(ress => {
					})
				})
			} else if (this.active == 0) {
				if (this.tuiQuery.last_id) {
					this.videoShow(this.tuiQuery.last_id, 1)
				}
				if (this.tuiVideoList.length > 0) return this.playVideo()
				new Promise((resolve, reject) => {
					resolve(this.getRecommendList())
				}).then(res => {
					
					// this.$nextTick(() => {
					// 	this.context = uni.createVideoContext('video' + this.current5 + 0)
					// })
					if (!this.tuiQuery.last_id) return this.playVideo()
					this.playVideo()
					new Promise((resolve, reject) => {
						resolve(this.getRecommendList())
					}).then(ress => {

					})
				})
			} else {
				const idArr = JSON.parse(uni.getStorageSync('shopId') || '[]')
				if (idArr.length > 0) {
					idArr.forEach(item => {
						let index = this.videoList.findIndex(key => key.id == item)
						if (index != -1) {
							this.videoList[index].is_buy = 0
						}
					})
				}
				uni.setStorageSync('shopId', [])
				// this.videoQuery.offset = 1
				// this.videoList = []
			}
		},
		// watch: {
		// 	current5: {
		// 		handler(value, oldValue) {
		// 			this.context.pause()
		// 			this.context = uni.createVideoContext('video' + value + 0, this).play()
					
		// 		},
		// 		// deep: true
		// 	},
		// 	current0: {
		// 		handler(value, oldValue) {
		// 			this.playVideoDetail = value[this.current0]
		// 		},
		// 		deep: true
		// 	},
		// 	active(value) {
		// 		if (value == 0) {
		// 			if (this.tuiVideoList.length >= this.current5) {
		// 				this.playVideoDetail = this.tuiVideoList[this.current5]
		// 			}
		// 		} else if (value == 1) {
		// 			if (this.pickVideoList.length >= this.current0) {
		// 				this.playVideoDetail = this.pickVideoList[this.current0]
		// 			}
		// 		} else {
		// 			// this.context.pause()
		// 		}
		// 	}
		// },
		onLoad({id, active}) {
			if (id) {
				this.active = active
				if (active == 0) {
					this.tuiQuery.last_id = id
				} else if (active == 1) {
					this.followQuery.last_id = id
				}
			}
			this.getVideoList()
		},
		onReady() {
			
			uni.getSystemInfo({
				success: (res) => {
					let menu = wx
						.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
					console.log('下至' + menu.bottom, '上至' + menu.top, '这个？' + res.statusBarHeight)
					console.log(menu.bottom + menu.top - res.statusBarHeight, '看下参数')
					this.titleBarHeight = menu.bottom + menu.top - res.statusBarHeight
					this.topMount = menu.top // 胶囊距离上面的高度
				}
			})
		},
		filters: {
			filterVideoTime(time) {
				if (!time) {
					return '00:00'
				}
				const second = parseInt(time / 60)
				const minute = (time % 60 + '').slice(0, 2)
				return `${second < 10 ? '0' + second : second}:${minute < 10 ? '0' + minute : minute}`
			},
			filterDay(stamp) {
				if (!stamp) return ''
				let time = follow_status(timestampToTime(stamp * 1000))

				time = time < 1 ? `${time.toFixed(1)}小时前` : `${parseInt(time)}天前`

				return time;
			}
		},
		onShareAppMessage(res) {
			if (res.from == 'button') {
				// console.log(res)
				if (this.active == 0) {
					this.tuiVideoList[this.current5].forwardings++
				} else if (this.active == 1) {
					this.pickVideoList[this.current0].forwardings++
				}
				
				this.shareHandle(res.target.dataset.student.id)
				return {
					title: res.target.dataset.student.title,
					imageUrl: res.target.dataset.student.cover_url,
					path: '/pages/index/index?id=' + res.target.dataset.student.id + '&active=' + this.active,
					
				}
			}
		},
		methods: {
			...mapMutations('cart', ['updateCartList', 'removeCartList']),
			async shareHandle(id) {
				await this.$http.request('/api/v1/shop/forwarding', {id}, 'POST')
			},
			// 全屏播放
			fullScreenHandle(item) {
				this.iSFullScreen = true
				this.context.requestFullScreen({
					direction: 90
				})
			},
			fullScreenChange(e) {
				if (!e.detail.fullScreen) {
					this.iSFullScreen = false
				}
			},
			// 视频播放事件
			playHandle() {
				if (this.iSFullScreen) {
					this.isPlaying = true
				}
			},
			// 视频暂停事件
			pauseHandle() {
				if (this.iSFullScreen) {
					this.isPlaying = false
				}
			},
			// 点击视频播放暂停切换
			playChange(item) {
				if (this.iSFullScreen) return
				if (this.active == 1) {
					if (item.is_buy == 0 && item.price != 0) {
						// this.updateCartList(item)
						this.isPlaying = false
						this.context.pause()
						// this.$nextTick(() => {
						// 	this.$refs.popup_video.open()
						// })
						return
					}
				}

				this.isPlaying = !this.isPlaying

				// let currentId = ''
				// if (this.active == 0) {
				// 	currentId = 'video' + this.current5 + this.active; // 获取当前视频id\
				// } else if (this.active == 1) {
				// 	currentId = 'video' + this.current0 + this.active; // 获取当前视频id\
				// }
				if (this.isPlaying) {
					this.context.play()
				} else {
					this.context.pause()
				}

			},
			// 合集内容
			async groupContent(id) {
				this.groupQuery.group = id
				const res = await this.$http.request('/api/v1/shop/group', this.groupQuery, 'GET')

				if (res.code == 200) {
					this.groupList = res.data.data
					this.groupCount = res.data.pages.count
					this.showMark = true
					this.$refs['group-list'].open()
				} else {
					uni.$toast(res.msg)
				}

			},
			// 添加购物车
			addCart(videoItem) {
				uni.showModal({
					title: '该视频为付费视频',
					content: '是否确定加入购物车',
					success: res => {
						if (res.confirm) {
							this.updateCartList(videoItem)
						}
					}
				})
				// console.warn('this.cartList', this.cartList)
			},
			groupClose() {
				this.$refs['group-list'].close()
				this.showMark = false
			},
			allCommentsShow() {
				this.showAllComments = !this.showAllComments
			},
			// 视频错误信息回调
			videoErrorCallback(e) {},
			// 获取元素宽高
			loadedmetadataHandle(e) {
				this.videoHeight = e.detail.height / 2
				console.warn('this.videoHeight=>>>', this.videoHeight)
			},
			transHandle(e) {
				this.offset = e.detail.dy
			},
			transHandleLeft(e) {
				this.offsetX = e.detail.dx
			},
			animationfinish(e) {
				this.offset = 0
			},
			animationfinishLeft(e) {
				this.offsetX = 0
			},
			playVideo() {
				let currentId = ''
				let isBuy = ''
				let price = ''
				let videoItem = {}
				if (this.active == 0) {
					currentId = 'video' + this.current5 + 0; // 获取当前视频id\
					// currentId = 'video'; // 获取当前视频id\
					// console.warn('currentId', currentId)
					this.isPlaying = true
					this.context = uni.createVideoContext(currentId, this)
					this.context.play()
					// this.context = uni.createVideoContext(currentId, this).play();
				} else if (this.active == 1) {
					currentId = 'video' + this.current0 + 1; // 获取当前视频id\
					this.context = uni.createVideoContext(currentId, this)
					isBuy = this.pickVideoList[this.current0]?.is_buy
					price = this.pickVideoList[this.current0]?.price
					videoItem = this.pickVideoList[this.current0]

					if (isBuy == 0 && price != 0 && this.active == 1) {
						this.context.pause()
						this.isPlaying = false
						this.updateCartList(videoItem)
						// this.$nextTick(() => {
						// 	this.$refs.popup_video.open()
						// })
					} else {
						this.isPlaying = true
						this.context.play()
					}
				}
			},

			// 总的swiper切换
			allSwiperChange(e) {
				// this.videoContent = ''
				if (e.detail.current < 2) {
					this.navChange(e.detail.current)
				} else {
					this.searchVideoQuery.search = ''
					this.navChange(e.detail.current, this.navList[e.detail.current].id)
					this.getVideoList()
				}
			},
			// 点赞功能
			async thumbsUp(item, id) {
				const res = await this.$http.request('/api/v1/shop/like', {
					id
				})
				if (res.code == 200) {
					item.is_like = item.is_like == 0 ? 1 : 0
					item.is_like == 0 ? item.likes-- : item.likes++
					return
				}
				uni.$toast('点赞失败')
			},
			// 关注作者
			async subscribe(id) {
				const res = await this.$http.request('/api/v1/author/subscribe', {
					id
				})
				if (res.code == 200) {
					return uni.$toast('关注成功')
					this.followQuery.last_id = ''
				}
				uni.$toast('关注失败')
			},
			
			// 获取关注视频
			async getFollowList() {
				const res = await this.$http.request('/api/v1/subscribe', this.followQuery, 'GET')
				if (res.code == 200) {
					this.videoInfo = res.data
					if ((this.videoInfo.id == this.followQuery.last_id) || Array.isArray(this.videoInfo))
						return this
							.followQuery.last_id = ''
					if (this.videoInfo.id) {
						this.followQuery.last_id = this.videoInfo.id
						this.videoShow(this.videoInfo.id, 0)
					} else {
						this.followQuery.last_id = ''
						return
					}
				}
			},
			toPlayVideo(item) {
				if (item.is_buy == 0 && item.price != 0) {
					this.addCart(item)
					return
				}
				uni.navigateTo({
					url: '/pages/teacher/video-play?videoInfo=' + JSON.stringify(item)
				})
			},
			// 搜索视频课程
			async searchVideo() {
				this.searchVideoQuery.classify = this.videoQuery.classify
				if (!this.searchVideoQuery.search) return
				const res = await this.$http.request('/api/v1/shop/search', this.searchVideoQuery, 'GET')
				if (res.code == 200) {
					this.videoList = res.data.data
					this.cancelHandle()
				}
			},
			// 获取推荐视频
			async getRecommendList() {
				const res = await this.$http.request('/api/v1/recommended', this.tuiQuery, 'GET')
				if (res.code == 200) {
					this.videoInfo = res.data // 每次接口返回的对象
					if ((this.videoInfo.id == this.tuiQuery.last_id) || Array.isArray(this.videoInfo))
						return this
							.tuiQuery.last_id = ''
					if (this.videoInfo.id) {
						this.tuiQuery.last_id = this.videoInfo.id
						this.videoShow(this.videoInfo.id, 1)
					} else {
						this.tuiQuery.last_id = ''
						return
					}
				}
			},
			// 视频显示接口
			async videoShow(id, state) {
				// state 0--关注 1--推荐
				const res = await this.$http.request('/api/v1/shop/show', {
					id
				}, 'GET')
				if (res.code == 200) {
					if (state == 0) {
						this.pickVideoList.push({
							...res.data,
							isClick: false,
							realHeight: (750 / res.data.video_width).toFixed(2) * res.data.video_height
						})
						this.playVideo()
					} else {
						this.tuiVideoList.push({
							...res.data,
							isClick: false,
							realHeight: (750 / res.data.video_width).toFixed(2) * res.data.video_height
						})
						this.context.play()
						// if (this.current5 == 0) {
						// 	this.playVideoDetail = this.tuiVideoList[0]
						// 	this.context.play()
						// }
					}
					// 获取视频路径后播放视频
					// this.playVideo()
					// this.context.play()
				}
			},
			// 获取其他视频列表
			async getVideoList() {
				const res = await this.$http.request('/api/v1/shop', this.videoQuery, 'GET')
				if (res.code == 200) {
					const navList = [{
							name: '推荐',
							id: 0
						},
						{
							name: '关注',
							id: 1
						},
					]
					this.navList = [...navList, ...res.data.classify]
					this.navCount = res.data.classify.length != 0 ? this.navList.length - 2 : 0
					if (!(this.active < 2)) {
						this.videoList = [...this.videoList, ...res.data.data]
						this.total = +(res.data.pages?.count)
					}

				}
			},
			// 分页模块
			scrollToBottem() {
				if (this.active > 1) {
					if (this.videoQuery.offset * this.videoQuery.limit >= this.total) return
					this.videoQuery.offset++
					this.getVideoList()
				}
			},
			// 评论
			async chatfun(i, id) {
				this.commentIndex = i
				this.commentQuery.id = id
				this.sendCommentQuery.shop_id = id
				this.$refs.popup_chat.open()
				const res = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
				if (res.code == 200) {
					this.commentList = res.data
					this.commentAmount = res.data.length || 0
					// 
					const timestamp = new Date().getTime() - this.commentList[0]?.created_at
				}
			},
			// 评论点赞
			async giveThumbsUp(comment_id) {
				const res = await this.$http.request('/api/v1/comment/like', {
					comment_id
				})
				if (res.code == 200) {
					// uni.$toast('点赞成功')
					const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
					if (ress.code == 200) {
						this.commentList = ress.data || []
						this.commentAmount = ress.data.length || 0
						const timestamp = new Date().getTime() - this.commentList[0].created_at
					}
					return
				}
			},
			swiperVideoChange(e) {
				this.context.pause()
				this.isPlaying = true
				// 切换轮播后再次请求视频接口
				if (this.active == 0) {
					// this.playId = e.detail.current
					// this.current5 = e.detail.current
					
					// this.$nextTick(() => {
					// 	this.playVideoDetail = this.tuiVideoList[e.detail.current]
					// 	console.log(this.playVideoDetail)
					// 	this.context.play()
					// })
					if (e.detail.current < this.current5 - 1) {
						this.current5 = e.detail.current // 轮播索引
						
						this.$nextTick(() => {
							this.playVideo()
						})
						return
					}
					this.current5 = e.detail.current // 轮播索引
					try {
						this.playVideo()
					} catch (e) {
						//TODO handle the exception
					}
					if (this.tuiQuery.last_id) {
						new Promise((resolve, reject) => {
							resolve(this.getRecommendList())
						}).then(res => {

						})

					}
				}
				if (this.active == 1) {
					// this.current0 = e.detail.current
					if (e.detail.current < this.current0 - 1) {
						this.current0 = e.detail.current // 轮播索引
						this.$nextTick(() => {
							this.playVideo()
						})
						return
					}
					this.current0 = e.detail.current // 轮播索引
					try {
						this.playVideo()
					} catch (e) {
						//TODO handle the exception
					}
					if (this.followQuery.last_id) {
						new Promise((resolve, reject) => {
							resolve(this.getFollowList())
						}).then(res => {})
					}
				}
			},

			commentclose() {
				this.$refs.popup_chat.close()
			},
			// 顶部nav切换
			navChange(i, id) {
				this.context.pause()
				// this.playVideoDetail = {}
				this.isPlaying = true
				this.active = i
				this.currentNum = i // 最外层swiper下标
				this.searchVideoQuery.search = ''
				// this.playId = 0
				// this.currentIndex = 0
				if (i == 1) {
					if (this.pickVideoList.length != 0) return this.playVideo()
					new Promise((resolve, reject) => {
						resolve(this.getFollowList())
					}).then(res => {
						if (!this.followQuery.last_id) return this.playVideo()
						// this.context.play()
						new Promise((resolve, reject) => {
							resolve(this.getFollowList())
						}).then(ress => {
							// this.playVideoDetail = this.pickVideoList[0]
						})
					})
				} else if (i == 0) {
					if (this.tuiVideoList.length != 0) return this.playVideo()
					new Promise((resolve, reject) => {
						resolve(this.getRecommendList())
					}).then(res => {
						if (!this.tuiQuery.last_id) return this.playVideo()
						new Promise((resolve, reject) => {
							resolve(this.getRecommendList())
						}).then(ress => {
							// this.playVideoDetail = this.tuiVideoList[0]
						})
					})
				} else {
					this.videoQuery.classify = id
					this.videoList = []
				}

			},


			// 评论框输入时，按钮变色
			btnchangeon() {
				this.commentsSendBtn = 'comments-send-btn-active'
			},
			btnchangeoff() {
				this.commentsSendBtn = 'comments-send-btn'
			},
			// 发布评论
			async commentSendText() {
				if (!this.sendCommentQuery.text) return
				let res = null
				// 如果评论视频
				if (this.isCommentVideo) {
					res = await this.$http.request('/api/v1/comment/create', this.sendCommentQuery)
					if (res.code == 200) {
						uni.$toast('评论成功')
						this.sendCommentQuery.text = ''
						const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
						if (ress.code == 200) {
							this.commentList = ress.data
							this.commentAmount = ress.data.length || 0
							const timestamp = new Date().getTime() - this.commentList[0].created_at
						}
						if (this.active == 0) {
							this.tuiVideoList[this.commentIndex].comments++
						} else if (this.active == 1) {
							this.pickVideoList[this.commentIndex].comments++
						}
						return
					}
					uni.$toast('评论失败')
				} else {
					this.sendCommentQuery.level = 1
					res = await this.$http.request('/api/v1/comment/create', this.sendCommentQuery)
					if (res.code == 200) {
						uni.$toast('评论成功')
						this.sendCommentQuery.text = ''
						const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
						if (ress.code == 200) {
							this.commentList = ress.data
							this.commentAmount = ress.data.length || 0
							const timestamp = new Date().getTime() - this.commentList[0].created_at
						}
						if (this.active == 0) {
							this.tuiVideoList[this.commentIndex].comments++
						} else if (this.active == 1) {
							this.pickVideoList[this.commentIndex].comments++
						}
						return
					}
					uni.$toast('评论失败')
				}

			},
			// 评论第二层级
			commentClick(id, nickname) {
				this.isCommentVideo = !this.isCommentVideo
				if (!this.isCommentVideo) {
					this.sendCommentQuery.comment_id = id
					this.placeholder = `回复 @${nickname}: `
				} else {
					this.sendCommentQuery.comment_id = 0
					this.placeholder = '您可以在此输入评论...'
				}
			},

			// 更多视频
			async videolists(item) {
				this.payMentQuery.group = item.group
				const res = await this.$http.request('/api/v1/shop/group', this.payMentQuery, 'GET')
				if (res.code == 200) {
					this.payMentList = res.data.data
					this.payMentList?.forEach((item, i) => {
						item.isClick = false
					})
				}
				this.$refs.popup_video.open()
			},
			videoclose() {
				this.$refs.popup_video.close()
			},
			// 跳转老师个人信息
			toInfoTeacher(id) {
				const token = uni.getStorageSync('acess_token')
				if (token) {
					uni.navigateTo({
						url: '/pages/teacher/teacher?id=' + id
					})
				}
			},
			// 支付
			payMoney(id, price, i) {
				this.apiList = []
				this.payment.shop_id = ''
				this.allMoney = 0
				const query = {
					...this.cartList[i],
					isClick: !this.cartList[i].isClick
				}
				this.cartList.splice(i, 1, query)
				this.cartList.forEach((item, index) => {
					if (item.isClick) {
						this.apiList.push(item.id)
						this.payment.shop_id = this.apiList.join(',')
						this.allMoney += +(item.price)

					}
				})
				this.allMoney = this.allMoney.toFixed(2)
				const result = this.cartList.filter((item, i) => !item.isClick)
				if (result.length == 0) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
			},
			// 立即结算 提交订单
			async payMoneyprice() {
				const res = await this.$http.request('/api/v1/order', this.payment)
				if (res.code == 200) {
					const ress = await this.$http.request('/api/v1/pay', {
						data: JSON.stringify(res.data)
					})
					if (ress.code == 200) {
						// 仅作为示例，非真实参数信息。
						console.warn(ress.data.config)
						console.warn(Date.parse(new Date()) + '')
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: ress.data.config.timestamp,
							nonceStr: ress.data.config.nonceStr,
							package: ress.data.config.package,
							signType: ress.data.config.signType,
							paySign: ress.data.config.paySign,
							success: res => {
								const idList = this.payment.shop_id.split(',')
								this.removeCartList(idList)
								this.payment.shop_id = ''
								this.allMoney = 0
							},
							fail(err) {}
						});
					}
				}
			},
			radioChange(e) {
				this.allMoney = 0
				this.apiList = []
				this.isAllChecked = !this.isAllChecked
				if (!this.isAllChecked) {
					this.payMentList.forEach((item, index) => {
						item.isClick = false
					})
					this.allMoney = 0
				} else {
					this.payMentList.forEach((item, index) => {
						item.isClick = true
						this.apiList.push(item.id)
						this.payment.shop_id = this.apiList.join(',')
						this.allMoney += +(item.price)
					})
					this.allMoney = this.allMoney.toFixed(2)
				}

			},
			shareWxin(item) {
				uni.showLoading({
					title: '加载中'
				})
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					summary: item.title,

				})
			},
			// 展示搜索弹窗
			showSearchPop() {
				this.$refs.searchPop.open()
			},
			cancelHandle() {
				this.$refs.searchPop.close()
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './style/index.scss';

	.search-wrap {
		position: relative;
		background-color: #fff;
		border-radius: 0 0 30rpx 30rpx;
		width: 100%;
		height: 440rpx;
		padding: 30rpx;
		z-index: 9999;

		.input-box {
			margin-top: 150rpx;
			width: 100%;
			height: 100rpx;
		}

		.btns-wrap {
			@include flex-between(100%);
			margin-top: 30rpx;

			view {
				@include flex-center(250rpx, 76rpx);
				font-size: 28rpx;
				border-radius: 12rpx;
			}

			.cancel {
				background: rgba(0, 0, 0, 0.05);
				color: #666666;
			}

			.confirm {
				background: #5A77A3;
				color: #fff;
			}
		}
	}
</style>
